<template>
    <div class="login_wrap_r">
        <div class="form_wrap_r">
            <h2 style="color: #404040">找回密码</h2>
            <el-form :model="forGotData" :rules="rules" ref="resetForm">
                <el-form-item prop="phone">
                    <el-input v-model="forGotData.phone" prefix-icon="Iphone" placeholder="手机号" />
                </el-form-item>
                <el-form-item prop="email">
                    <el-input v-model="forGotData.email" type="email" prefix-icon="Promotion" placeholder="邮箱" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="forGotData.password" type="password" prefix-icon="Lock" placeholder="重置密码" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ensurepassword" type="password" prefix-icon="Lock" placeholder="确认密码" />
                </el-form-item>
                <el-form-item prop="code">
                    <el-input style="width:140px;" v-model="forGotData.code" type="" prefix-icon="Lock" placeholder="验证码" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button type="primary" @click="getEmail()" style="font-size:11px;cursor:pointer;width:120px;"
                        v-bind:disabled="isDisabled" id="countdown">发送验证码</el-button>
                    <div></div>
                </el-form-item>

                <el-button type="primary" class="login_btn_r" @click="userRegister(resetForm)">确认提交</el-button>
                <br>
                <el-button type="" class="login_btn_r" @click="resetInfo">重&nbsp;&nbsp;&nbsp;置</el-button>

            </el-form>
        </div>
    </div>
</template>

<script>

import { toRefs, reactive, ref } from '@vue/reactivity'
import { userforGotPwdApi, updatePwdApi } from "../utils/clientApi"
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'

export default {
    name: 'forGot',
    setup() {
        const router = useRouter()
        // 数据域
        const data = reactive({

            forGotData: {
                email: "",
                phone: "",
                password: "",
                code: ""

            },
            isDisabled: false,
            ensurepassword: "",
            code: "",
            rules: {
                phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', pattern: /^[1][34578][0-9]{9}$/ }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur', pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/ }],

            },

        })
        // 方法域begin
        const resetForm = ref()
        const userRegister = (Form2) => {
            // console.log(data.forGotData, data.ensurepassword, data.code);


            Form2.validate(res => {
                if (!res) {
                    //表单验证不通过不做任何改变
                    ElMessage.error("表单不可为空")
                    return
                } else {
                    if (data.forGotData.password === data.ensurepassword) {

                        updatePwdApi(data.forGotData).then(res => {
                            if (res.status === 200) {
                                ElMessage.success(res.msg)
                                router.push({
                                    path: "/login"
                                })
                            } else {
                                ElMessage.error(res.msg)

                            }
                        })
                    } else {
                        ElMessage.error("两次输入的密码不一致！")
                    }

                }
            })


        }

        // 发送验证码

        const getEmail = () => {

            if (data.forGotData.phone !== "" && data.forGotData.email !== "") {
                userforGotPwdApi(data.forGotData).then(res => {
                    if (res.status === 200) {
                        ElMessage.success(res.msg)
                        data.isDisabled = true
                        countTime()
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                ElMessage.error("手机号以及邮箱不能为空！")
            }





        }
        // 清空表表单
        const resetInfo = () => {
            data.loginData = {}
            data.ensurepassword = ""
        }


        // 两分钟倒计时
        const countTime = () => {
            var count = 120;
            // 按钮禁用
            // data.isDisabled = true
            var countdown = setInterval(function () {
                count--;
                document.getElementById("countdown").innerHTML = count + "秒";
                if (count === 0) {
                    clearInterval(countdown);
                    document.getElementById("countdown").innerHTML = "发送验证码";

                    data.isDisabled = false
                }
            }, 1000);
        }



        // 方法域end
        return {
            // 返回的方法名
            ...toRefs(data),
            userRegister, resetInfo, getEmail, countTime, resetForm
        }
    }




}
</script>

<style>
.login_r {
    width: 100%;
    height: 100%;
    background: red;
}

.login_wrap_r {
    width: 100%;
    height: 100vh;
}

.form_wrap_r {
    width: 350px;
    height: 400px;
    position: fixed;
    padding: 0 20px 30px 20px;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffff;

    box-shadow: 3px 5px 5px 3px #c4bfbf;

}

#login-bg {
    /*
    登录页背景图
    */

    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.login_btn_r {
    display: block;
    margin: 0 auto;
    width: 100%;

}

h3 {
    text-align: center;
    line-height: 24px;

}
</style>